<template>
  <TransitionRoot as="template" :show="showComputed">
    <Dialog as="div" class="relative" @close="showComputed = false">
      <div class="fixed inset-0"></div>
      <div class="fixed inset-0 overflow-hidden">
        <div class="absolute inset-0 overflow-hidden">
          <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
            <TransitionChild as="template" enter="transform transition ease-in-out duration-500 sm:duration-700"
              enter-from="translate-x-full" enter-to="translate-x-0"
              leave="transform transition ease-in-out duration-500 sm:duration-700" leave-from="translate-x-0"
              leave-to="translate-x-full">
              <DialogPanel class="pointer-events-auto w-screen max-w-md">
                <div class="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl">
                  <div class="flex min-h-0 flex-1 flex-col overflow-y-scroll py-6">
                    <div class="px-4 sm:px-6">
                      <div class="flex items-start justify-between">
                        <DialogTitle class="text-base font-semibold leading-6 text-gray-900">新建数据库连接</DialogTitle>
                        <div class="ml-3 flex h-7 items-center">
                          <button type="button"
                            class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            @click="showComputed = false">
                            <span class="sr-only">Close panel</span>
                            <XMarkIcon class="h-6 w-6" aria-hidden="true" />
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="relative mt-6 flex-1 px-4 sm:px-6">
                      <!-- Your content -->
                      <div class="mb-4">
                        <label for="email" class="block text-sm font-medium leading-6 text-gray-900">链接名称</label>
                        <div class="mt-2">
                          <input type="text" name="linkName" id="linkName"
                            class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                            placeholder="localhost" v-model="linkInfo.linkName" />
                        </div>
                      </div>
                      <div class="mb-4">
                        <label for="email" class="block text-sm font-medium leading-6 text-gray-900">数据库地址</label>
                        <div class="mt-2">
                          <input type="text" name="dbHost" id="dbHost"
                            class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                            placeholder="127.0.0.1" v-model="linkInfo.host" />
                        </div>
                      </div>
                      <div class="mb-4">
                        <label for="email" class="block text-sm font-medium leading-6 text-gray-900">开放端口号</label>
                        <div class="mt-2">
                          <input type="text" name="dbPort" id="dbPort"
                            class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                            placeholder="6379" v-model="linkInfo.port" />
                        </div>
                      </div>
                      <div class="mb-4">
                        <label for="email" class="block text-sm font-medium leading-6 text-gray-900">用户</label>
                        <div class="mt-2">
                          <input type="text" name="dbUserName" id="dbUserName"
                            class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                            placeholder="default" v-model="linkInfo.userName" />
                        </div>
                      </div>
                      <div class="mb-4">
                        <label for="email" class="block text-sm font-medium leading-6 text-gray-900">密码</label>
                        <div class="mt-2">
                          <input type="password" name="dbPassword" id="dbPassword"
                            class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                            placeholder="********" v-model="linkInfo.password" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 底部按钮 -->
                  <div class="flex justify-between">
                    <!-- 测试链接 -->
                    <div class="connect flex py-4 px-4">
                      <button type="button"
                        class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 h-10"
                        @click="testLink">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                          stroke="currentColor" data-slot="icon" class="w-5 h-5">
                          <path stroke-linecap="round" stroke-linejoin="round"
                            d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
                        </svg>
                        连接测试
                      </button>
                    </div>
                    <!-- 控制 -->
                    <div class="flex flex-shrink-0 justify-end px-4 py-4">
                      <button type="button"
                        class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
                        @click="showComputed = false">
                        取消
                      </button>
                      <button type="submit" @click="saveLink"
                        class="ml-4 inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">
                        添加
                      </button>
                    </div>
                  </div>
                </div>
              </DialogPanel>
            </TransitionChild>
          </div>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>
  
<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import { tryOnUnmounted, useVModel } from '@vueuse/core'
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
import { XMarkIcon } from '@heroicons/vue/24/outline'
import type { Link } from '@/types/connect'
import { invoke } from '@tauri-apps/api/tauri'
import { checkLinkParam, getRedisUrl, hasLink } from '@/utils/redis'
import useLinkStore from '@/stores/link'

const props = defineProps<{
  show: boolean, // 显示
  notification: Function
}>()

const emits = defineEmits(['update:show'])
const showComputed = useVModel(props, 'show', emits)

const ntShow = ref(false)
const linkStore = useLinkStore()

const linkInfo = ref<Link>({
  linkName: '',
  host: '',
  port: 6379,
  userName: '',
  password: ''
})
/**
 * 保存链接
 */
const saveLink = () => {
  const check = checkLinkParam(linkInfo.value);
  if (check == false) {
    props.notification('error', '参数错误', '请正确填写参数');
  } else if (hasLink(linkInfo.value)) {
    props.notification('error', '保存失败', '链接已存在: ' + linkInfo.value.linkName);
  }
  else {
    linkStore.links.push(linkInfo.value)
    showComputed.value = false;
  }
}

/**
 * 连接测试
 */
const testLink = () => {
  const url = getRedisUrl(linkInfo.value);
  if (url) {
    invoke('redis_connect_test', { url: url }).then((res) => {
      if (res) {
        ntShow.value = true;
        props.notification('success', '测试链接成功', '' + linkInfo.value.host + ':' + linkInfo.value.port)
      } else {
        props.notification('error', '测试链接失败', '' + linkInfo.value.host + ':' + linkInfo.value.port)
      }
    })
      .catch((e) => {
        props.notification('error', '测试链接失败', '' + e.message)
      })
  } else {
    props.notification('error', '参数错误', '请正确填写参数');
  }
}
/**
 * 监听事件
 */
const stop = watchEffect(() => {
  if (showComputed.value === false) {
    linkInfo.value = {
      linkName: '',
      host: '',
      port: 6379,
      userName: '',
      password: ''
    }
  }
})

tryOnUnmounted(() => {
  stop();
})
</script>
  